昨天我們在元件上設定屬性傳入 props 資料，
React還有其他傳遞資料的方式就是可以用 props.children 使用，
能讓子元件以 props.children 方式，傳入JSX的結構，
這樣的方式讓開發者能夠在元件內部靈活地插入子元素。
在前面幾篇中，當我們使用React component時，元件都是這樣表示

<元件名稱/>

而元件也可以這樣表示

<元件名稱><元件名稱/>

而今天要使用children 的話則是 夾在元件的中間裡面

<元件名稱>
	放入想要呈現的JSX內容
<元件名稱/>

我們來看一個實際範例：

所渲染出來的畫面會是

通常運用於

• 嵌套內容：當你希望在一個元件中嵌套其他元件或元素時，props.children 可以讓你做到這一點，而不必額外傳遞 props。
• 動態內容渲染：你可以根據不同的情境在父元件中動態地插入內容，子元件則會根據 props.children 自動渲染這些內容。

常用場景：

1. 對話框（Dialog）或彈窗（Modal）：

   • 可以創建一個 Modal 元件，並使用 props.children 來插入特定的內容。這樣可以重用相同的 Modal 元件來顯示不同的文字或對話框。

   function Modal({ title, children }) {
     return (
       <div className="modal">
         <h2>{title}</h2>
         {children}
         <button>Close</button>
       </div>
     );
   }
   
   <Modal title="User Information">
     <p>User details go here.</p>
   </Modal>
   
   

2. 佈局（Layout）：

   • 在設計頁面佈局時，props.children 可用來動態插入頁面內的主要內容區域，而外層佈局保持不變。

   function Layout({ children }) {
     return (
       <div className="layout">
         <header>Header</header>
         <main>{children}</main>
         <footer>Footer</footer>
       </div>
     );
   }
   
   <Layout>
     <h1>Welcome to My Website</h1><p>This is the homepage content.</p>
   </Layout>
   
   

props.children 是 React 中一個非常實用的功能，可以在元件間靈活地傳遞和顯示內容，並設計出更加彈性且可複用性高的元件。

參考資料:

• 【React.js入門 - 10】 夾在中間的props: children - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

後記

本文將會同步更新到我的部落格

• 黃禎平 – Medium